<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta content="telephone=no" name="format-detection" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable = no"/>
    <title>基本信息设置</title>
    <link href="__PUBLIC__/wap/css/rest.css"  rel="stylesheet">
    <link href="__PUBLIC__/wap/css/user.css"  rel="stylesheet">
    <link href="__PUBLIC__/bootstrap/vendor/Jcrop/jquery.Jcrop.min.css" rel="stylesheet" media="screen">
     <link rel="stylesheet" href="__PUBLIC__/bootstrap/vendor/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="__PUBLIC__/bootstrap/vendor/fontawesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="__PUBLIC__/bootstrap/vendor/themify-icons/themify-icons.min.css">
        <link href="__PUBLIC__/bootstrap/vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
        <link href="__PUBLIC__/bootstrap/vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
        <link href="__PUBLIC__/bootstrap/vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
        <!-- end: MAIN CSS -->
        <!-- start: CLIP-TWO CSS -->
        <link rel="stylesheet" href="__PUBLIC__/bootstrap/assets/css/styles.css">
        <link rel="stylesheet" href="__PUBLIC__/bootstrap/assets/css/plugins.css">
        <link rel="stylesheet" href="__PUBLIC__/bootstrap/assets/css/themes/theme-1.css" id="skin_color" />
        <!-- end: CLIP-TWO CSS -->
        <!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
        <!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
          <link rel="stylesheet" href="__PUBLIC__/bootstrap/vendor/artDialog/skins/default.css?4.1.7">
  <style type="text/css">
  .jcrop-holder #preview-pane{
    top: 165px;
    right: -126px;
    display:none;
  }

  </style>
</head>
<body id="u-body">
    <header id="header" class="u-header clearfix">
        <div class="u-hd-left f-left">
            <a href="javascript:history.go(-1);" class="J_backToPrev"><span class="u-icon-px i-hd-back"></span></a>
        </div>
        <div class="u-hd-tit"><span>头像上传</span></div>
    </header>
     <form action="" role="form" id="form2" novalidate="novalidate" method="post" onSubmit="return false;">
    <div class="ui-form ">
      <label style="width:100%">
       <div class="in_user_center userdiv upload_file" id="logout_btn_div" >
        <p class="btn_out" style="margin:0 auto;"><span class="up_img">上传图片</span>
         <img class="show_add"  src="__PUBLIC__/wap/img/icon_zhuan.gif" alt="" style="width:100%;max-width:25px;margin:0 auto;display:none;">
        </p>
         <input type="file" class="upload_input" name="head_photo" id="head_photo_background" value="" style="display:none;"> 
        </div>
       </label> 
        
     
    </div>
</form>

<if condition="empty($_GET['img'])">
    <div style="width:300px;margin:0 auto;">
 <img  src="{$data.member_logo|get_member_logo_default}" alt="" style="width:100%;max-width:300px;margin:0 auto;">
</div>
<else/>
    <div style="max-width:300px;max-height:300px;">
 <div class="container-fluid container-fullw thumbnail">
<img src="{$_GET['img']}" id="target2" alt="[Jcrop Example]"  />
                                    
   <div id="preview-pane">
    <div class="preview-container">
<img src="{$_GET['img']}" class="jcrop-preview" alt="Preview" />
    </div>
    </div>
</div>
    </div>

<form id="coords" class="coords margin-top-20" onsubmit="return false;" action="" onSubmit="return false;">
      
        <div class="inline-labels" style="display:none">
             <input type="" id="pic_name" name="pic_name" value="{$_GET['img']}">
            <label>
                X1
                <input type="text" size="4" id="x1" name="x1" />
            </label>
            <label>
                Y1
                <input type="text" size="4" id="y1" name="y1" />
            </label>
            <label>
                X2
                <input type="text" size="4" id="x2" name="x2" />
            </label>
            <label>
                Y2
                <input type="text" size="4" id="y2" name="y2" />
            </label>
            <label>
                W
                <input type="text" size="4" id="w" name="w" />
            </label>
            <label>
                H
                <input type="text" size="4" id="h" name="h" />
            </label>
        </div>
        
    </form>
    <form action="" role="form" id="form3" novalidate="novalidate" method="post" onSubmit="return false;">
<input type="hidden" id="member_logo" name="member_logo" value="{$_GET['img']}">
    </form> 
    <a href="###" id="confirmOk" class="new-abtn-type new-mg-tb30 phone_log_btn">确认修改</a>
</if>

<div style="height:30px;">
   </div> 
     <!--end top-->
<include file="Public/footer" />

     <script src="__PUBLIC__/bootstrap/vendor/jquery/jquery.min.js"></script>

      <script src="__PUBLIC__/bootstrap/vendor/Jcrop/jquery.Jcrop.min.js"></script>
        <script src="__PUBLIC__/bootstrap/vendor/Jcrop/jquery.color.js"></script>

        <script src="__PUBLIC__/bootstrap/assets/js/form-wap-image-cropping.js"></script>
<script src="__PUBLIC__/bootstrap/vendor/ajaxfileupload/ajaxfileupload.js"></script>
 <script src="__PUBLIC__/js/jquery.form.js"></script>
    <script type="text/javascript" src="__PUBLIC__/layer/layer.js"></script>

    <script>

    $(document).ready(function (e) {
         ///上传商家logo
        $('.upload_file').on('change','.upload_input', function () {
           ajaxFileUpload('background',"{:U('Wap/Member/upload_ajax')}");
        });

    });

    //文件上传带预览
    function ajaxFileUpload(imgid,  url) {
          $('.up_img').html("图片上传中");
          $('.show_add').show();
        $.ajaxFileUpload({
                    url: url,
                    secureuri: false,
                    fileElementId: "head_photo_"+imgid,
                    dataType: 'json',
                    data: {name: 'logan', id: 'id'},
                    success: function (data, status)
                    {
                      
                        if (typeof (data.error) != 'undefined')
                        {
                              
                            if (data.error != '')
                            {
                                var dialog = art.dialog({title: false, fixed: true, padding: 0});
                                dialog.time(2).content("<div class='tips'>" + data.error + "</div>");
                            } else {

                                var resp = data.msg;
                                if (resp != '0000') {
                                    var dialog = art.dialog({title: false, fixed: true, padding: 0});
                                    dialog.time(2).content("<div class='tips'>" + data.error + "</div>");
                                    return false;
                                } else {
window.location.href="<?php echo U('Wap/Member/setphoto'); ?>?img="+data.imgurl; 
                                    //$('#pic_name').val();
                                     //$("#target2").attr('src', data.imgurl);
                                  /*  art.dialog.open("{:U('admin/Imagecat/index')}?img=" + data.imgurl, {
                                        title: '裁剪图片',
                                        width: '800px',
                                        height: '400px'
                                    });*/

                                    //dialog.time(3).content("<div class='msg-all-succeed'>上传成功！</div>");
                                }




                            }
                        }
                    },
                    error: function (data, status, e)
                    {
                        var dialog = art.dialog({title: false, fixed: true, padding: 0});
                        dialog.time(3).content("<div class='tips'>" + e + "</div>");
                    }
                })

        return false;
    }

            jQuery(document).ready(function() {
                //Main.init();
                ImageCropping.init();

                //表单提交
        $("#confirmOk").click(function(){           
            if (parseInt($('#w').val())){

                var pic_name = $("#pic_name").val();
                var x = $("#x1").val();
                var y = $("#y1").val();
                var w = $("#w").val();
                var h = $("#h").val();
                $.get("{:U('Wap/Member/crop_submit')}",{pic_name:pic_name,x:x,y:y,w:w,h:h},function(data){
                    if(data.status==1){
                        
                    //  alert(data.file);
  $("#member_logo").val(data.file);
      var options = { 
                url :  "<?php echo U('Wap/Member/setphoto'); ?>", 
                type : "post" , 
                dataType:'json', 
                target : "#loader", 
                error: function(){layer.msg("服务器没有返回数据，可能服务器忙，请重试",{icon:5});}, 
                onwait : "正在处理信息，请稍候...",
                success: function(response){ 
                      // console.log(response);
                    //$("#loader").fadeIn(500).html(response.data).fadeOut(500); 
                    //$('#editform').hide(2000); 
                    if(response.status==1){
                       
                       window.location.href="<?php echo U('Wap/Member/setphoto'); ?>"; 
                    }else{
                        layer.msg(response.error,{icon:5});
                    }
                }
            };
            setTimeout((function(opt){
                return function(){
                    $('#form3').ajaxSubmit(opt);
                }
            })(options), 300); 
            return false; 


                    
                    }else{
                    
                        layer.msg(data.error,{icon:5});
                        return false;
                    }                   
                    
                },"json");
                return false;
            }           
            return false;
        });
            });
        </script>  
      
</body>
</html>